@import "~normalize.css/normalize.css";
@import "variables";

html,
body {
  font-family:
    "Helvetica Neue",
    Helvetica,
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    "微软雅黑",
    Arial,
    sans-serif;
  font-size: $--size-base;
  line-height: 1.5715;
}

::selection {
  background-color: $--color-primary;
  color: $--color-white;
}

* {
  scrollbar-color: $--color-primary mix($--color-primary, #fff, 0.2);
  scrollbar-width: thin;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: $--color-primary;
  }

  &::-webkit-scrollbar-track {
    border-radius: 10px;
    background: mix($--color-primary, #fff, 0.3);
    box-shadow: inset 0 0 1px rgb(0 0 0 / 0%);
  }
}

/* ==================
          布局
 ==================== */

/*  -- flex弹性布局 -- */

.flex {
  display: flex;
}

.basis-xs {
  flex-basis: 20%;
}

.basis-sm {
  flex-basis: 40%;
}

.basis-df {
  flex-basis: 50%;
}

.basis-lg {
  flex-basis: 60%;
}

.basis-xl {
  flex-basis: 80%;
}

.flex-sub {
  flex: 1;
}

.flex-twice {
  flex: 2;
}

.flex-treble {
  flex: 3;
}

.flex-direction {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.self-end {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

// 间隔
$gaps: 0, 4, 8, 12, 16, 20, 22, 24;

@each $gap in $gaps {
  .m#{$gap} {
    margin: #{$gap}px !important;
  }
  .mt#{$gap} {
    margin-top: #{$gap}px !important;
  }
  .mb#{$gap} {
    margin-bottom: #{$gap}px !important;
  }
  .ml#{$gap} {
    margin-left: #{$gap}px !important;
  }
  .mr#{$gap} {
    margin-right: #{$gap}px !important;
  }
  .mv#{$gap} {
    margin-top: #{$gap}px !important;
    margin-bottom: #{$gap}px !important;
  }
  .mh#{$gap} {
    margin-right: #{$gap}px !important;
    margin-left: #{$gap}px !important;
  }
  .p#{$gap} {
    padding: #{$gap}px !important;
  }
  .pt#{$gap} {
    padding-top: #{$gap}px !important;
  }
  .pb#{$gap} {
    padding-bottom: #{$gap}px !important;
  }
  .pl#{$gap} {
    padding-left: #{$gap}px !important;
  }
  .pr#{$gap} {
    padding-right: #{$gap}px !important;
  }
  .pv#{$gap} {
    padding-top: #{$gap}px !important;
    padding-bottom: #{$gap}px !important;
  }
  .ph#{$gap} {
    padding-right: #{$gap}px !important;
    padding-left: #{$gap}px !important;
  }
}

// 高度

.h100 {
  height: 100%;
}

// 宽度
.w100 {
  width: 100% !important;
}

// 字体相关
.text-normal {
  font-weight: normal !important;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

// icon
.icon-money {
  display: inline-block;

  &::before {
    content: "￥";
    font-style: normal;
  }
}

// 定位相关
.fixed {
  position: fixed;
}
